<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试轮播</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">
    <script src="../zujian/layui/layui.all.js"></script>
    <script src="../zujian/jqueryAndBootStrap/jquery-3.4.1.min.js"></script>

</head>
<body>
<br/><br/>
<div class="layui-carousel" id="test103" lay-filter="test104" style="margin-left:270px">
    <div carousel-item id="xxkk">
        <div><img src="../pic/李丽珍.gif" height="220" width="660"/></div>
        <div><img src="../pic/hashiqi.jpg" height="306" width="500"/></div>
        <div><img src="../pic/chuiniubi.jpg" height="667" width="564"/></div>
        <div>条目4</div>
        <div>条目5</div>
    </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->


<script>


    //divImgJqueryObj就是 img外层那个div
    function 设置图片大小和外部div大小一样(divImgJqueryObj,carouselheight,carouselwidth){
        //设置第一张轮播图大小跟外部div大小一致
        let  img0=divImgJqueryObj.html();//html()里面不写东西是得到对象里面的html string格式
        let  img00=$(img0);
        img00.attr("height",carouselheight);
        img00.attr("width",carouselwidth);
        divImgJqueryObj.html(img00);
    }

    layui.use('carousel', function(){
        let carousel = layui.carousel;
        let ins=null;

        let carouselheight='440px';
        let carouselwidth='778px';



        设置图片大小和外部div大小一样($("#xxkk div:nth-child(1)"),carouselheight,carouselwidth);

        //监听轮播切换事件
        carousel.on('change(test104)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值
            console.log(obj.index); //当前条目的索引
            console.log(obj.prevIndex); //上一个条目的索引
            //就是 "条目5"  等
            console.log($(obj.item).html()); //当前条目的元素对象




            //从新设置img的大小跟轮播图外侧div一样大
            设置图片大小和外部div大小一样($("#xxkk div:nth-child("+(parseInt(obj.index)+1)+")"),carouselheight,carouselwidth);


        });
        //建造实例
        ins=carousel.render({
            elem: '#test103'
            ,width:carouselwidth
            ,height:carouselheight
            // ,width: '100%' //设置容器宽度
            // 轮播切换动画方式，可选值为：
            //     default（左右切换）
            // updown（上下切换）
            // fade（渐隐渐显切换）
            // ,anim: 'updown' //切换动画方式
            // ,autoplay:true
            // 自动切换的时间间隔，单位：ms（毫秒），不能低于800
            // ,interval:1000
            // 初始开始的条目索引//从0开始索引
            ,index:0
            //切换箭头默认显示状态，可选值为：
            // hover（悬停显示）
            // always（始终显示）
            // none（始终不显示）
            ,arrow:'always'
            // 指示器(下面那个跟红绿灯一样的一排)位置，可选值为：
            // inside（容器内部）
            // outside（容器外部）
            // none（不显示）
            ,indicator:'outside'
            //全屏轮播
            ,full:false
        });

        //重置轮播 options是一个对象参数
        // ins.reload(options);






    });


</script>
</body>
</html>